<template>
  <div>
    <pannel title="添加账号">
      <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户组" prop="userGroup">
          <el-select v-model="form.userGroup" placeholder="请选择用户组">
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="超级管理员" value="超级管理员"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addBtn">添加</el-button>
          <el-button @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-form>
    </pannel>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { usersAdd } from "@/api/users";
// data  components  computed watch  methods  filters   生命周期
export default {
  data() {
    let accountReg = (rule, value, call) => {
      if (!value) {
        return call(new Error("请输入账号"));
      }
      let reg = /^[a-z|A-Z]/;
      if (!reg.test(value)) {
        return call(new Error("请以英文字母开头"));
      }
      return call();
    };
    return {
      form: {
        account: "",
        password: "",
        userGroup: "",
      },
      rules: {
        account: [{ validator: accountReg, trigger: "blur" }],
        password: [
          { required: true, message: "请选择用户组", trigger: "blur" },
        ],
        userGroup: [
          { required: true, message: "请选择用户组", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    Pannel,
  },
  methods: {
    addBtn() {
      this.$refs.form.validate(async (flag) => {
        console.log(flag);
        //通过验证发送axiOS
        if (flag) {
          let res = await usersAdd(this.form);
          if (res.code == 0) {
            this.$message.success("添加账号成功");
            this.resetBtn()
          }
        }
      });
    },
    resetBtn() {
      let obj = {
        account: "",
        password: "",
        userGroup: "",
      };
      this.form = { ...obj };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 300px;
}
</style>